<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('quantify.cpxq')" :leftIcon="true"></navbar>

		<!-- 产品信息卡片 -->
		<view class="product-card">
			<view class="product-header">
				<image class="product-image" :src="productDetail.image" mode="aspectFit"></image>
				<view class="info-icon" @click="openQuestionModal">
					<image src="/static/image/quantify/question.svg" mode="aspectFit"></image>
				</view>
			</view>

			<view class="product-info">
				<view class="product-name-row">
					<text class="product-name">{{ formatProductName(productDetail.title || 'Helmet #1005') }}</text>
					<view class="progress-container">
						<text class="progress-text">{{t('quantify.jd')}}</text>
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: Math.round(productDetail.progress) + '%' }"></view>
						</view>
						<text class="progress-percent">{{ Math.round(productDetail.progress) }}%</text>
					</view>
				</view>
				<view class="card-bottom">
					<view class="limit-row">
						<text class="limit-label">{{ $t('quantify.xm') }}:</text>
						<text class="limit-value">{{ productDetail.minAmount }}-{{ productDetail.maxAmount }}</text>
					</view>
					<view class="profit-row">
						<text class="profit-label">{{ $t('billing.zq') }}:</text>
						<text class="profit-value">{{ productDetail.cycle }}</text>
						<text class="profit-label">{{ $t('invitation.sy') }}:</text>
						<text class="profit-value">{{ productDetail.rate }}%</text>
					</view>
				</view>

			</view>
		</view>

		<!-- 介绍标签 -->
		<view class="intro-tab">
			<view class="tab-item active">
				<text class="active-line"></text>
				<view>{{ t('quantify.js') }}</view>
			</view>
		</view>

		<!-- 介绍内容 -->
		<view class="intro-content">
			<rich-text class="intro-rich-text" v-if="productDetail.description" :nodes="productDetail.description"></rich-text>
			<template v-else>
				<text
					class="intro-text">该产品是Fragment旗下NFT增益型产品，基于3000万用户，且具有较高的流动性、增值性，以流动性为基础使用系统AI自动交易实现持续性收益。利用人工智能和机器学习（ML）算法，分析市场数据、预测交易决策并执行订单，具核心后开非追求短期暴利，而是通过纪律性和系统性来获取长期、持续且回撤小的正回报。</text>

				<text class="intro-subtitle">"稳定性收益" 从何而来?</text>

				<text class="intro-text">产品的纪律性 (Discipline): 完全持续信息透明化，100%执行策略，避免了人类 "恐惧和贪婪" 的非理性行为。</text>

				<text class="intro-text">超强的计算能力 (Computing Power): 可以同时分析数千个资产和海量数据，发现人类无法识别的微观但极为重要的统计规律（称为 "阿尔法因子"）。</text>

				<text class="intro-text">分散化 (Diversification):
					AI可以同时运行多个相关性低的策略于多个市场（股票、外汇、加密货币等），分散风险。一个策略的亏损可能被另一个策略的盈利所抵消。</text>

				<text class="intro-text">风险管理的精细化 (Risk Management): AI可以实时计算并调整合适的风险敞口，并自动调整大小以小额损失止损，严格控制下行回撤。</text>

				<text class="intro-text">24/7不间断工作: 无需在外汇和加密货币市场，AI可以抓住所有时间段的交易机会。</text>
			</template>
		</view>

		<!-- 底部购买按钮 -->
		<view class="buy-button" @click="openBuyPopup">
			<text class="buy-text">{{ t('quantify.gm') }}</text>
		</view>
		
		<GlobalPopup ref="popup"></GlobalPopup>
		<BuyPopup ref="buyPopup" :product-info="productDetail" @confirm="handlePurchaseConfirm" @close="handlePopupClose"></BuyPopup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n';
	import { formatProductName } from '@/components/k_line/utils/tool.js';
	import { investApi } from '@/utils/api.js';
	import GlobalPopup from '@/components/GlobalPopup/GlobalPopup.vue';
	import BuyPopup from '@/components/BuyPopup/BuyPopup.vue';
	
	const {
		t,
		locale
	} = useI18n();
	const popup = ref();
	const buyPopup = ref();
	
	// 产品详情数据
	const productDetail = ref({
		id: '',
		title: '',
		progress: 0,
		minAmount: '',
		maxAmount: '',
		rate: '',
		cycle: '',
		description: '',
		image: '/static/icon/bg5.png'
	});
	
	const loading = ref(false);
	
	// 获取产品详情
	const getProductDetail = async (id) => {
		if (!id) {
			console.error('产品ID不能为空');
			return;
		}
		
		try {
			loading.value = true;
			const response = await investApi.getProductDetail(id);
			
			if (response.code === 0 && response.data) {
				const data = response.data;
				productDetail.value = {
					id: data.id || '',
					title: data.title || '',
					progress: parseFloat(data.progress) || 0,
					minAmount: data.minAmount || '',
					maxAmount: data.maxAmount || '',
					rate: data.rate || '',
					cycle: data.cycle || '',
					description: data.description || '',
					image: data.image || '/static/icon/bg5.png'
				};
			}
		} catch (error) {
			console.error('获取产品详情失败:', error);
			uni.showToast({
				title: '获取产品详情失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};
	
	onMounted(() => {
		// 获取页面参数中的产品ID
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		const productId = currentPage.options.id;
		
		if (productId) {
			getProductDetail(productId);
		}
	});
	const openQuestionModal = () => {
		popup.value.open({
			title:  t('quantify.bcpzgm'),
			content: '',
			showBut: true,
			loading: false,
			butText:  t('quantify.wzdl')
		})
	}
	
	// 打开购买弹窗
	const openBuyPopup = () => {
		buyPopup.value.open();
	}
	
	// 处理购买确认
	const handlePurchaseConfirm = (purchaseData) => {
		console.log('购买确认:', purchaseData);
		
		// 订单创建成功，跳转到订单详情页面
		if (purchaseData.orderId) {
			uni.navigateTo({
				url: `/pages/quantify/orderlist`
			});
		}
	}
	
	// 处理弹窗关闭
	const handlePopupClose = () => {
		console.log('购买弹窗已关闭');
	}
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		box-sizing: border-box;
		position: relative;
		padding: 20rpx 78.59rpx;
		padding-bottom: 180rpx;

		// 产品信息卡片
		.product-card {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			margin-top: 41.86rpx;
			padding: 34.88rpx 41.86rpx 41.86rpx;

			.product-header {
				position: relative;
				// height: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 71.52rpx;

				.product-image {
					width: 141.29rpx;
					height: 141.29rpx;
					border-radius: 50%;
				}

				.info-icon {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					width: 40rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.product-info {
				// padding: 20rpx 30rpx 30rpx;

				.product-name-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 31.4rpx;

					.product-name {
						font-size: 27.91rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 40.42rpx;
						color: rgba(51, 51, 51, 1);
					}

					.progress-container {
						display: flex;
						align-items: center;

						.progress-text {
							font-size: 24.42rpx;
							font-weight: 300;
							letter-spacing: 0rpx;
							line-height: 35.36rpx;
							color: rgba(0, 0, 0, 1);
						}

						.progress-bar {
							width: 143rpx;
							height: 6.98rpx;
							background-color: #F5F5F5;
							border-radius: 5rpx;
							overflow: hidden;
							margin-right: 10rpx;

							.progress-fill {
								height: 100%;
								background: linear-gradient(90deg, rgba(255, 195, 0, 1) 0%, rgba(222, 176, 24, 1) 34.03%, rgba(255, 87, 51, 1) 65.97%, rgba(255, 87, 51, 1) 100%);
							}
						}

						.progress-percent {
							font-size: 20.93rpx;
							font-weight: 300;
							letter-spacing: 0rpx;
							line-height: 30.32rpx;
							color: rgba(0, 0, 0, 1);
						}
					}
				}

				.card-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.limit-row {
						font-size: 24.42rpx;
						font-weight: 300;
						letter-spacing: 0rpx;
						line-height: 35.36rpx;
						color: rgba(0, 0, 0, 1);

						.limit-label {
							font-size: 28rpx;
							color: #666666;
						}

						.limit-value {
							font-size: 28rpx;
							color: #333333;
						}
					}

					.profit-row {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.profit-value {
							font-size: 27.91rpx;
							font-weight: 500;
							letter-spacing: 0rpx;
							line-height: 40.42rpx;
							color: rgba(13, 179, 100, 1);
							margin-right: 43.61rpx;
						}

						.duration {
							font-size: 27.91rpx;
							font-weight: 500;
							letter-spacing: 0rpx;
							line-height: 40.42rpx;
							color: rgba(255, 87, 51, 1);
						}
					}
				}

			}
		}

		// 介绍标签
		.intro-tab {
			margin: 41.86rpx 0;

			.tab-item {
				display: flex;
				font-size: 27.91rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.42rpx;
				color: rgba(0, 0, 0, 1);


				.active-line {
					width: 6.98rpx;
					height: 41.86rpx;
					opacity: 1;
					border-radius: 6.98rpx;
					background: rgba(2, 120, 220, 1);
					margin-right: 13.95rpx;
				}
			}
		}

		// 介绍内容
		.intro-content {
			// background-color: #FFFFFF;
			// border-radius: 20rpx;
			// padding: 30rpx;

			.intro-text {
				display: block;
				font-size: 28rpx;
				color: #666666;
				line-height: 1.6;
				margin-bottom: 20rpx;
			}

			.intro-rich-text {
				font-size: 28rpx;
				color: #666666;
				line-height: 1.6;
				
				// 为rich-text内的HTML元素设置样式
				:deep(p) {
					margin-bottom: 20rpx;
					line-height: 1.6;
				}
				
				:deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
					font-weight: 500;
					color: #333333;
					margin: 30rpx 0 20rpx;
				}
				
				:deep(strong), :deep(b) {
					font-weight: 500;
					color: #333333;
				}
				
				:deep(ul), :deep(ol) {
					padding-left: 40rpx;
					margin-bottom: 20rpx;
				}
				
				:deep(li) {
					margin-bottom: 10rpx;
					line-height: 1.6;
				}
			}

			.intro-subtitle {
				display: block;
				font-size: 30rpx;
				color: #333333;
				font-weight: 500;
				margin: 30rpx 0 20rpx;
			}
		}

		// 底部购买按钮
		.buy-button {
			width: 570.38rpx;
			height: 97.68rpx;
			opacity: 1;
			border-radius: 26.16rpx;
			background: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 34.03%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%);
			justify-content: center;
			align-items: center;
			text-align: center;
			margin-top: 61.05rpx;

			text {
				font-size: 31.4rpx;
				font-weight: 700;
				line-height: 97.68rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
</style>